<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>孟孟哒个人博客 — 专治各种不服BUG</title>
    <meta charset="UTF-8">
</head>
<body>
</div>
</div>
<jsp:include page="common/header.jsp"/>
<!--导航条-->
<nav class="breadcrumb">
    <div class="container"><i class="Hui-iconfont">&#xe67f;</i> <a href="<%=request.getContextPath()%>/blog/list.html"
                                                                   class="c-primary">首页</a> <span
            class="c-gray en">&gt;</span> <span class="c-gray">个人相册</span></div>
</nav>
<section class="container mt-20">
    <div class="row w_main_row">
        <div class="col-lg-9 col-md-9 w_main_left">
            <div class="panel panel-default  mb-20">
                <div class="panel-body pt-10 pb-10">
                    <!--在这个ul中加载瀑布流-->
                    <ul id="photoList">
                    </ul>
                </div>
                <div id="bottom"></div>
            </div>
        </div>
    </div>
</section>
<jsp:include page="common/footer.jsp"/>
<!--使用lazyload要引入这个js-->
<script type="text/javascript" src="<%=request.getContextPath()%>/media/js/jquery.lazyload.min.js"></script>
<!--使用瀑布流要引入这个js-->
<script type="text/javascript" src="<%=request.getContextPath()%>/media/js/jquery.masonry.min.js"></script>
<script type="text/javascript">
    $(function(){
        getData();//加载第一页数据
        //到页面底端自动加载下一页
        $(window).scroll(function () {
            //$(window).scrollTop()这个方法是当前滚动条滚动的距离
            //$(window).height()获取当前窗体的高度
            //$(document).height()获取当前文档的高度
            //document.body.clientHeight是浏览器可视范围高度
            if ($("#bottom").offset().top-$(window).scrollTop()-20<$(window).height()) {
                //当底部基本距离+滚动的高度+文档的高度>窗体的高度时；
                //我们需要去异步加载数据了
                getData();
            }
        });
    });
    //因为masonry需要直达元素高度，所以延迟加载后再重新布局
    function f_masonry() {
        $('#photoList').masonry({
            gutterWidth: 20,
            itemSelector: '.item',
            isAnimated: true
        });
    }

    var pageNum = 1;
    var isLastPage = false;
    var lastPage=0;
    function getData() {
        if (isLastPage) {
            $("#bottom").html("没有更多了亲");
            return;
        }
        if(lastPage==pageNum){
            return;
        }
        lastPage=pageNum;
        $.ajax({
            url: "<%=request.getContextPath()%>/photo/list.html",
            data: "pageNum=" + pageNum,
            method:"post",
            success: function (data) {
                //只对新的元素进行懒加载，原来的去掉标记
                $(".new_item").removeClass("new_item");
                var htmlStr = ""
                $.each(data.list,function (i, obj) {
                    htmlStr += "<li class=\"item\">";
                    htmlStr += "<img class=\"new_item\" data-original=\"http://localhost:8080/upload/" + obj + "\"/>";
                    htmlStr += "</li>";
                });
                var $boxes = $(htmlStr);
                //追加新的元素，并使用masonry的appended在瀑布流中追加新元素
                $("#photoList").append($boxes).masonry('appended', $boxes).masonry();
                pageNum ++;
                isLastPage = data.isLastPage;
                //只对新元素lazyload，不然已经加载的img还要lazyload一遍，瀑布流就会重新布局
                $(".new_item").lazyload({
                    effect: "fadeIn",
                    failurelimit: 40,
                    load: f_masonry
                });
                //lazyload的实现原理是，在页面滚动时，会搜索未加载的图片，如果图片在可视范围内就加载，
                // 默认情况下当找到第一张不在可见区域的图片时就会停止搜索。
                // 而搜索的顺序就是HTML文档中dom节点的定义顺序，所以如果有些图片定义在前面，
                // 但由于页面不好的布局图片将会呈现在后面，那么就会导致图片没办法正常显示。
                //此时我们可以通过lazyload函数的failure_limit参数：
            }
        })
    }
</script>
<style type="text/css">
    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    .item {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 40px;
        text-align: center;
        line-height: 60px;
        margin-bottom: 20px;
        color: #FFF;
        float: left;
        background-color: #f003ed;
        border: 2px solid #D29BE7;
        border-radius: 5px;
        overflow: hidden;
        width: 200px;
    }

    img {
        max-width: 100%;
        padding: 10px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    @media screen and (max-width: 900px) {
        .item {
            width: 100% !important;
        }
    }

</style>
</body>
</html>
